<template>
	<view id="DisplayPage">
		<swiper class="swiper-box" @change="change" style="width: 100%;height: 100%;" indicator-active-color="#F56C6C" circular=true indicator-dots=true>
			<swiper-item v-for="(item ,index) in info" :key="index">
				<view class="swiper-item">
					<!-- 图片渲染 -->
					<image class="images" :src="item.img" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="but" v-show="status">
			<!-- 跳转按钮 -->
			<button type="primary" size="default" style="width: 40%;" @tap="Jump">进入</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播列表
				info: [{
					img: 'https://imagepphcloud.thepaper.cn/pph/image/151/105/837.jpg'
				}, {
					img: 'https://img0.baidu.com/it/u=3215032491,203551202&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500'
				}, {
					img: 'https://img0.baidu.com/it/u=4139826556,2279116439&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=753'
				}],
				current: 0,
				mode: 'round',
				// 按钮显示隐藏
				status : false
			}
		},
		methods: {
			// 轮播事件
			change(e) {
				this.current = e.detail.current;
				console.log(e.detail.current)
				if(e.detail.current == 2){
					this.status = true
				}else{
					this.status = false
				}
			},
			// 跳转事件
			Jump(){
				uni.navigateTo({
					url:'/pages/LoginPage/LoginPage'
				})
			}
		}
	}
</script>

<style lang="scss">
#DisplayPage{
	width: 100%;
	height: 100vh;
	background-color: #ccc;
	
}
.images{
	width: 100%;
	height: 100vh;
}
.but{
	width: 100%;
	position: absolute;
	bottom: 20%;
}
</style>